<template>
    <div>
      <div class="form_wrap">
       <div>
        <el-input v-model="searchText"></el-input>
          <span>专业选择：</span>
          <el-select v-model="CategoryOne">
            <el-option  :label="item.label" :value="item.value" v-for="item in opt1" :key="item"></el-option>
          </el-select>
              <el-select v-model="CategoryTwo">
             <el-option  :label="item.label" :value="item.value" v-for="item in opt2" :key="item"></el-option>
          </el-select>
          <el-select v-model="CategoryThree">
               <el-option  :label="item.label" :value="item.value" v-for="item in opt3" :key="item"></el-option>
          </el-select>
          <el-button type="primary" @click="toSearch">查询</el-button>
        </div>
        <el-button type="success">添加</el-button>
      </div>
    </div>
</template> 

<script lang="ts">
import {reactive,toRefs,defineComponent} from 'vue'
export default defineComponent({
    props:["opt1","opt2","opt3"],
    emits:{
      sendsearch:null
    },
    setup(props,context){
        let formdata=reactive({
          searchText:"",
          CategoryOne:"",
          CategoryTwo:"",
          CategoryThree:"",
        })
        // 子传父 搜素字段数据
        let toSearch=()=>{
          context.emit("sendsearch",formdata)
           formdata.searchText="";
            formdata.CategoryOne="";
            formdata.CategoryTwo="";
            formdata.CategoryThree="";
        }
        let mydata=toRefs(formdata)
        return {
          toSearch,
          ...mydata
        }
    }
})
</script>

<style lang="less">
  .form_wrap{
    width: 100%;
    display: flex;
    background: #ccc;
    height: 50px;
    align-items: center;
    justify-content: space-between;
    .el-input{
      width: 200px;
    }
  }
</style>